<template>
  <v-navigation-drawer
    v-model="drawer"
    fixed
    dark
    permanent
    class="m-nav"
  >
    <v-list	nav>
      <v-list-item>
        <v-list-item-icon>
          <v-icon>mdi-home</v-icon>
        </v-list-item-icon>

        <v-list-item-title>Home</v-list-item-title>
      </v-list-item>

      <v-list-group
        v-for="item in items"
        :key="item.title"
        v-model="item.active"
        :prepend-icon="item.action"
        no-action
      >
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>
        </template>

        <v-list-item
          v-for="child in item.items"
          :key="child.title"
        >
          <v-list-item-content>
            <v-list-item-title v-text="child.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list-group>
    </v-list>
  </v-navigation-drawer>
</template>

<script lang="ts">
  export default {
    data: () => ({
      // items: [
      //   ['mdi-chart-scatter-plot ', 'Dashboard'],
      //   ['mdi-clipboard-text-outline ', 'Orders'],
      //   ['mdi-cube', 'Assets'],
      //   ['mdi-account-settings-outline', 'Customers'],
      //   ['mdi-file-chart-outline ', 'Reports'],
      // ],
			drawer: true,
			items: [
        {
          action: 'mdi-clipboard-text-outline',
          items: [{ title: 'List Item' }],
          title: 'Orders',
        },
        {
          action: 'mdi-cube',
          active: true,
          items: [
            { title: 'Terminals Assets' },
            { title: 'New American' },
            { title: 'Sushi' },
          ],
          title: 'Assets',
        },
        {
          action: 'mdi-account-settings-outline',
          items: [{ title: 'List Item' }],
          title: 'Customers',
        },
        {
          action: 'mdi-file-chart-outline',
          items: [{ title: 'List Item' }],
          title: 'Reports',
        },
      ],
    }),
  }
</script>

<style lang="less" scoped>
.m-nav {
	top: 64px !important
}
</style>